<template>
  <div class="carousel">
    <template>
      <el-carousel height="100%" arrow="always">
        <el-carousel-item v-for="item in showImgList" :key="item">
          <img :src='item' alt="">
        </el-carousel-item>
      </el-carousel>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    imgList: Array
  },
  computed: {
    showImgList: function () {
      let newList = []
      this.imgList.map(rec => {
        newList.push(rec.url)
      })
      return newList
    }
  },
  name: 'IndexCarousel',
  data () {
    return {}
  },
  mounted () {
    console.log('imgList=', this.imgList)
  }
}
</script>

<style scoped>
.carousel {
  width: 100%;
  height: 100%;
}
.el-carousel {
  width: 100%;
  height: 100%;
}
.el-carousel__container {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
.el-carousel ul {
  position: absolute !important;
}
</style>
